<template>
	<view class="container">
		<uni-swiper-dot :info="bannerList" :current="current" :dotsStyles="dotsStyles" mode="round" class="swiper-box">
			<swiper class="swiper-box" @change="change" autoplay="true" circular="true">
				<swiper-item v-for="(item ,index) in bannerList" :key="index">
					<view class="swiper-item">
						<image :src="item.imgUrl" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- <view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" autoplay="true" interval="2000" duration="500" circular="true" indicator-active-color="#FFFFFF"
					 @change="change()" :current="cur">
					 <block v-for="(item,index) in bannerList" :key="index" :index="index">
							<swiper-item >
								<view class="swiper-item">
									<image :src="item.imgUrl" mode="" @click="swipclick(index)"></image>
								</view>
							</swiper-item>
					 </block>					
					</swiper>
				</view>
			</view>
			<view class="dot-main center">
				<block v-for="(item,index) in bannerList" :index="index" :key="index">
					<view  :class="['dot-item',index  == cur ? 'dot-active':'']"></view>
				</block>				
			</view>
		</view> -->
		<view class="row tab">
			<view class="tab-item column" @click="toMall">
				<image src="../../static/img/bg1.png" mode=""></image>
				<text>租赁商品</text>
			</view>
			<view class="tab-item column" @click="toMall">
				<image src="../../static/img/bg2.png" mode=""></image>
				<text>购买商品</text>
			</view>
			<view class="tab-item column" @click="toMyOrder">
				<image src="../../static/img/bg3.png" mode=""></image>
				<text>个人订单</text>
			</view>
		</view>
		<view class="big-title">
			<text>推荐商品</text>
		</view>
		<view class="item row" v-for="(item,index) in goodsList" :key="index" @click="toDetail(item.id)">
			<image :src="item.imgLogo" mode=""></image>
			<view class="right">
				<view class="title-bar row">
					<text class="title">{{item.name}}</text>
					<text class="num">剩余数量：{{item.stock}}</text>
				</view>
				<view class="desc">
					规格：{{item.specificationName}}
				</view>
				<view class="desc">
					简介：{{item.details}}
				</view>
			</view>
		</view>
		<view class="login-mask center" v-if="show">
			<view class="loginModel">
				<view class="center">
					您还未登录，点击登录集装箱平台
				</view>
				<view class="center justy">
					<view class="nologinBtn" @click="noLogin">暂不登录</view>
					<view class="center loginBtn">
						微信登录
						<button open-type='getUserInfo' @getuserinfo='getUserInfoBtn'></button>
					</view>
				</view>
			</view>
		</view>
		<button open-type='getPhoneNumber' @getphonenumber='getphonenumber' v-if="show2" class="login-mask2"></button>
	</view>
</template>

<script>
	import comm from '../../static/data/commFunc.js'
	import cfg from '../../static/data/config.js'
	var r = cfg.router;
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue"
	export default {
		components: {
			uniSwiperDot
		},
		data() {
			return {
				show: false,
				show2:false,
				current: 0,
				bannerList: [],
				dotsStyles: {
					width: 6,
					height: 6,
					bottom: 5,
					border: "1px rgba(0, 0, 0, 0) solid",
					selectedBorder: "1px rgba(0, 0, 0, 0) solid",
					selectedBackgroundColor: "#C3C3C3",
					color: "#EBEBEB",
				},
				goodsList: []
			};
		},
		onShow() {
			var that = this;
			let data = {}
			comm.request("POST", "/public/adList", data, (res, data) => {
				console.log("轮播图", res)
				if (res.data.ret_code == 200) {
					this.bannerList = data
				} else {
					comm.showToast(res.data.ret_msg, "none")
				}
			})
			var that = this;
			console.log("这是首页")
			uni.getSetting({
				success(res) {
					console.log(res.authSetting)
					if (res.authSetting["scope.userInfo"]) {
						console.log("授权啦")
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {
								console.log(loginRes.code);
								//调用登录接口	
								let data = {
									code: loginRes.code
								}
								comm.request("POST", "/public/login", data, (res, data) => {
									console.log("登录结果", res)
									if (res.data.ret_code == 200) {
										comm.setCache("token", data)
										that.getData()
										that.show = false
									} else {
										comm.showToast(res.data.ret_msg, "none")
									}
								})
							}
						})

					} else {
						that.show = true
						// comm.navigateTo(r.login)
					}
				}
			});
		},
		methods: {
			getData() {
				let data = {
					recommend: 1,
					current: 1
				}
				comm.request("POST", "/app/goods/goodsList", data, (res, data) => {
					console.log("推荐商品", res)
					if (res.data.ret_code == 200) {
						this.goodsList = data
					} else {
						comm.showToast(res.data.ret_msg, "none")
					}
				})
			},
			change(e) {
				// console.log(e)
				this.current = e.detail.current;
			},
			swipclick(index) {
				this.$router.open({
					url: this.bannerList[index].url
				})
			},
			toDetail(e) {
				if(!comm.getCache("token")){
					this.show = true
					return
				}
				comm.navigateTo(r.goodsDetail + "?id=" + e)
			},
			getUserInfoBtn() {
				var that = this;
				// 获取用户信息
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						console.log(infoRes)
						comm.setCache("iv", infoRes.iv)
						comm.setCache("encryptedData", infoRes.encryptedData)
						comm.setCache("nickName", infoRes.userInfo.nickName)
						comm.setCache("avatarUrl", infoRes.userInfo.avatarUrl)
						//调用登录接口
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {
								console.log(loginRes.code);
								//调用登录接口	
								let data = {
									code: loginRes.code
								}
								comm.request("POST", "/public/login", data, (res, data) => {
									console.log("登录结果", res)
									if (res.data.ret_code == 200) {
										comm.setCache("token", data)
										that.getData()
										that.show = false
										that.show2 = true
									} else {
										comm.showToast(res.data.ret_msg, "none")
									}
								})
							}
						})
					}
				});
			},
			noLogin() {
				console.log("暂不登录");
				this.show = false
			},
			getphonenumber(e){
				var encryptedData = encodeURIComponent(e.detail.encryptedData);
				var iv = e.detail.iv;
				let data = {
					encryptedData: encryptedData,
					iv: iv,
					nickName: comm.getCache("nickName"),
					headImgUrl: comm.getCache("avatarUrl")
				};
				comm.request("POST", "/app/member/getUser", data, (res, data) => {
					console.log("保存用户手机信息", res)
					if (res.data.ret_code == 200) {
							this.show2 = false
							comm.setCache("isLogin",true)
					} else {
						comm.showToast(res.data.ret_msg, "none")
					}
				})
			},
			noauthir(){
				this.show2 = false
			},
			toMall() {
				comm.switchTab(r.mall)
			},
			toMyOrder() {
				if (!comm.getCache("token")) {
					this.show = true
					return
				}
				comm.navigateTo(r.myOrder)
			},
			onShareAppMessage(title, url) {
				return {
					title: title || '',
					path: 'pages/home/home' || url
				}
			}
		}
	}
</script>

<style lang="less">
	.container {
		padding: 30rpx;
	}

	.uni-padding-wrap,
	.swiper-box {
		position: relative;
		height: 380rpx;
	}

	.swiper-item {
		height: 320rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.swiper-item image {
		width: 100%;
		height: 320rpx;
		border-radius: 16rpx;
		background: #EEEEEE;
		overflow: hidden;
	}

	.dot-main {
		width: 100%;
		height: 30px;
		// background: #646566;
		position: absolute;
		flex-direction: row;
		bottom: 0;

		.dot-item {
			width: 10rpx;
			height: 10rpx;
			background: #EBEBEB;
			margin: 0 6rpx;
			border-radius: 50%;
		}

		.dot-active {
			background: #C3C3C3;
		}
	}

	.tab {
		margin: 15px 0;
		justify-content: space-between;
		flex-wrap: wrap;

		.tab-item {
			position: relative;

			image {
				width: 210rpx;
				height: 124rpx;
				z-index: 0;
			}

			text {
				position: absolute;
				font-size: 15px;
				color: rgba(32, 39, 57, 1);
				top: 20rpx;
				left: 30rpx;
				font-size: 26rpx;
				color: rgba(255, 255, 255, 1);
			}
		}
	}

	.big-title {
		margin: 30rpx 0;
		font-size: 32rpx;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		padding-left: 30rpx;
		position: relative;
	}

	.big-title::before {
		content: '';
		display: block;
		width: 7rpx;
		height: 24rpx;
		position: absolute;
		background: #DB3012;
		left: 0;
		top: 50%;
		margin-top: -12rpx;
		border-radius: 4rpx;
	}

	.item {
		margin: 30rpx 0;
		align-items: flex-start;

		image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 20rpx;
			margin-right: 30rpx;
		}

		.right {
			flex: 1;

			.title-bar {
				justify-content: space-between;
				margin-bottom: 20rpx;

				.title {
					font-size: 30rpx;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
				}

				.num {
					font-size: 22rpx;
					color: rgba(153, 153, 153, 1);
					margin-bottom: 5rpx;
				}
			}

			.desc {
				font-size: 22rpx;
				color: rgba(153, 153, 153, 1);
				word-break: break-all;
			}
		}
	}

	.login-mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9;
	}
	.login-mask2{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0);
		z-index: 9;
	}
	.empty-btn {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0);
		z-index: 8;
	}

	.loginModel {
		width: 618rpx;
		height: 348rpx;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 14rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		color: #282828;
		font-size: 32rpx;
		padding-top: 80rpx;
	}

	.justy {
		margin-top: 60rpx;
		align-items: center;
		justify-content: space-around;
	}

	.loginBtn {
		width: 200rpx;
		// height: 92rpx;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		background: #D93011;
		border: 1px solid #D93011;
		font-size: 30rpx;
		color: #fff;
		position: relative;

		image {
			width: 46rpx;
			height: 38rpx;
			margin-right: 20rpx;
		}

		button {
			position: absolute;
			top: 0;
			left: 0;
			width: 200rpx;
			height: 60rpx;
			padding: 0;
			margin: 0;
			opacity: 0;
		}
	}

	.nologinBtn {
		width: 200rpx;
		border: 1px solid #D93011;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		text-align: center;
		font-size: 30rpx;
	}
</style>
